<template>
    <div id="tmpl">
        <!--头部区域  -->
        <mt-header fixed title="Vue商城系统">
            <router-link to="/home" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <!-- 图文表格 -->
        <div id="mui-content" class="mui-content" style="background-color:#fff">
            <ul class="mui-table-view mui-grid-view" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    
                <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in goodslist">
                    <router-link v-bind="{to:'/goods/goodsinfo/' + item.id}">
                        <img class="mui-media-object" :src="item.img_url">
                        <div class="mui-media-body">{{item.title}}</div>
                        <div class="desc">
                            <p>
                                <span>￥{{item.sell_price}}</span>
                                <s>￥{{item.market_price}}</s>
                            </p>
                            <p>
                                <h6 class="left">热卖中</h6>
                                <h6 class="right">剩余{{item.stock_quantity}}件</h6>
                            </p>
                        </div>
    
                    </router-link>
    
                </li>
    
            </ul>
        </div>
    </div>
</template>

 <script type="text/ecmascript-6">
import { Toast } from 'mint-ui'
import common from '../../kits/common.js'
export default {
    data() {
        return {
            pageindex: 1,
            goodslist: []
        }

    },
    created() {
        this.getgoodslist();
    },
    methods: {
        getgoodslist(pageindex) {
            var url = common.apidomain + "/api/getgoods?pageindex=" + this.pageindex;
            this.$http.get(url).then(function (response) {
                if (response.body.status != 0) {
                    Toast(response.body.message);
                    return;
                }
                this.goodslist = this.goodslist.concat(response.body.message) ;
                // console.log(response.body)

            })
        },
        loadMore() {
            this.loading = true;
            setTimeout(() => {
                // let last = this.goodslist[this.goodslist.length - 1];
                // for (let i = 1; i <= 1; i++) {
                    // this.goodslist.push(last + i);
                    this.pageindex++;
                    this.getgoodslist(this.pageindex);
                // }
                // this.pageindex++;
                // this.getgoodslist(this.pageindex);
                this.loading = false;
            }, 2500);
        }
    }
}
</script>

<style scoped >
#mui-content li {
    border: 1px solid rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 4px #000;
    -moz-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
    margin-left: 4px;
    padding-left: 0px;
}

#mui-content .mui-media-body {
    color: #0094ff;
}

#mui-content .desc {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding: 5px;
    text-align: left;
}

#mui-content .desc span {
    color: red;
    margin-right: 15px;
}

#mui-content a {
    padding-left: 0px;
    margin-left: 0px;
}

#mui-content .desc .right {
    position: absolute;
    right: 10px;
    bottom: 0px;
}

#mui-content .desc .left {
    position: absolute;
    left: 10px;
    bottom: 0px;
}
</style>
